<template>
  <div class="box">
    <div id="seven_yuQing_fenXi" :style="{width: '100%', height: '100%'}"></div>
  </div>
</template>

<script>
export default {
  name: "seven_yuQing_fenXi",
  props:{
    seven_yuQing_fenxi:{
      type:Array,
      required:true
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.init_today_data_source()
  },
  methods: {
    // 初始化
    init_today_data_source() {

      let fenxi_data=[]
      for (let i = 0; i <this.seven_yuQing_fenxi.length; i++) {
        fenxi_data.push({name:this.seven_yuQing_fenxi[i].emo,
          type: 'line',
          stack: '总量',
          data:this.seven_yuQing_fenxi[i].count})
      }

      console.log("seven_fenxi",this.seven_yuQing_fenxi)
      var dom = document.getElementById('seven_yuQing_fenXi')
      var myChart = this.echarts.init(dom)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '七日趋势分析',
          textStyle:{
            //文字颜色
            color:'#ccc',
            //字体风格,'normal','italic','oblique'
            fontStyle:'normal',
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight:'bold',
            //字体系列
            fontFamily:'sans-serif',
            //字体大小
            fontSize:18
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          }
        },
        series:fenxi_data
      });
    }
  }
}
</script>

<style scoped>
.box{
  width: 745px;
  height: 255px;
}
</style>
